<template>
    <div class="pd-20">
        <el-form :model="form" label-width="80px" ref="form">

            <el-form-item label="用户名">
                <el-input placeholder="请输入用户名" style="width:500px" v-model="form.username"></el-input>
            </el-form-item>

            <el-form-item label="密码">
                <el-input show-password placeholder="请输入密码" style="width:500px" v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item label="确认密码">
                <el-input show-password placeholder="请确认密码" style="width:500px" v-model="confirmPassword"></el-input>
            </el-form-item>

            <el-form-item label="昵称">
                <el-input placeholder="请输入昵称" style="width:500px" v-model="form.nickname"></el-input>
            </el-form-item>

            <el-form-item label="头像">
                <medium @set-content="setMedium" v-model="form.avatar"></medium>
            </el-form-item>
            <!-- 选择角色ID -->
            <el-form-item label="角色ID">
                <el-select v-model="form.role_id" placeholder="选择角色ID">
                    <el-option v-for="item in roleIdList" :key="item.value" :label="item.name" :value="item.id">
                    </el-option>
                    <el-button v-if="moreBut" class="butBox" type="primary" style="width: 100%;" @click="more">点击加载更多</el-button>
                </el-select>
            </el-form-item>


            <el-form-item label="状态">
                <el-switch v-model="disable" @change="disableFun" active-color="#13ce66" inactive-color="#ff4949">
                </el-switch>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" style="width: 470px;margin: 30px auto;" @click="submit">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import medium from '@/components/medium/index'
import VueEditor from '@/components/Editor/index' // ES6 Module
export default {
    components: {
        medium,
        VueEditor,
    },
    data() {
        return {
            form: {
                username: '',
                password: '',
                nickname: '',
                role_id: '',
                avatar: '',
                disable: 1
            },
            cate: [],
            type: 'create',//判断状态
            loading: false,
            init: false,
            disable: true,
            roleIdList: [],
            confirmPassword: '',
            page:1,
            moreBut:false
        }
    },
    mounted() {
        this.getRoleId()
        if (this.$route.query.id) {
            this.type = 'update'
            this.getAdministrators(this.$route.query.id)

        } else {
            this.init = true
        }
    },
    methods: {
        more(){
      this.page++
      this.getRoleId()
    },

        //根据id获取管理员
        getAdministrators(id) {
            this.$request.get('/admin/get/' + id,).then((res) => {
                // this.form.username = res.username
                // this.form.nickname = res.nickname
                // this.form.role_id = res.role_id
                // this.form.avatar = res.avatar
                // this.form.disable = res.disable
                this.form = res
                console.log("res.data", res)
                this.disable = this.form.disable == 1 ? true : false
                // this.init=true
            })
        },
        toAdministrators() {
            this.$router.push({ path: 'index' })
        },

        getRoleId() {
            let that = this
            this.$request.get('/admin-role/index', { page: that.page, size: 10 }).then((res) => {
                that.roleIdList = [...that.roleIdList, ...res.items]
                if(res.items.length >= 10){
                    that.moreBut = true
                }
                console.log("getRoleId", res.items)
            })
        },
        setMedium(value) {
            this.form.avatar = value
            console.log("value", value)
        },

        disableFun(res) {
            this.form.disable = res ? 1 : 0
            this.disable = res
        },
        submit() {
            if (!(this.form.username && this.form.password && this.form.nickname && this.form.role_id && this.form.username)) {
                this.$message({
                    message: '请将信息填写完整！',
                    type: 'warning'
                });
                return
            }

            if (this.form.password != this.confirmPassword) {
                this.$message({
                    message: '两次密码输入不一致',
                    type: 'warning'
                });
                return
            }


            if (this.type == 'create') {
                this.$request.post('/admin/create', this.form).then((res) => {
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    });
                    this.toAdministrators()
                })
            } else {
                this.$request.put('/admin/update/' + this.$route.query.id, this.form).then((res) => {
                    console.log(res)
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    this.toAdministrators()
                })
            }
        },
    },
}
</script>

<style lang="scss" scoped>
.butBox{
  background-color: rgb(219, 219, 219);
  border: none;
  color: #555;
}

</style>